﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="container-fluid">
      <div class="row-fluid" style="height:720px">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Chart Type</li>
              <li class="option active"><a href="#" onclick="createAreaChart()">Area Chart</a></li>
              <li class="option"><a href="#" onclick="createBarChart()">Bar Chart</a></li>
              <li class="option"><a href="#" onclick="createBubbleChart()">Bubble Chart</a></li>
              <li class="option"><a href="#" onclick="createStockChart()">Stock Chart</a></li>
              <li class="option"><a href="#" onclick="createMultiAxisChart()">Multi Axis Chart</a></li>
              <li class="option"><a href="#" onclick="createDateAxisChangeChart()">Date Axis Change Chart</a></li>
             
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="hero-unit">
                 <div id="chart"></div>          </div>
          <div class="span9">
            
            <div class="span4">
              
            </div><!--/span-->
            <div class="span4">
             
            </div><!--/span-->
          </div><!--/row-->
          <div class="row-fluid">
            <div class="span4">
              
            </div><!--/span-->
            <div class="span4">
              
            </div><!--/span-->
            <div class="span4">
             
            </div><!--/span-->
          </div><!--/row-->
        </div><!--/span-->
      </div><!--/row-->

     

      <footer>
        <p>&copy; Company 2013</p>
      </footer>

    </div><!--/.fluid-container-->

 
<script type="text/javascript">
    function createStockChart() {
        var stockDataSchema = {
            model: {
                fields: {
                    Date: {
                        type: "date"
                    }
                }
            }
        };        $("#chart").kendoStockChart({
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: "http://demos.kendoui.com/service/StockData",
                        dataType: "jsonp"
                    },
                    parameterMap: function (data) {
                        return { filter: JSON.stringify(data.filter) };
                    }
                },
                schema: stockDataSchema
            },
            title: {
                text: "The ACME Company"
            },
            dateField: "Date",
            series: [{
                type: "candlestick",
                openField: "Open",
                highField: "High",
                lowField: "Low",
                closeField: "Close"
            }],
            navigator: {
                dataSource: {
                    transport: {
                        read: {
                            url: "http://demos.kendoui.com/service/StockData",
                            dataType: "jsonp"
                        }
                    },
                    schema: stockDataSchema
                },
                series: {
                    type: "area",
                    field: "High"
                },
                select: {
                    from: "2009/02/05",
                    to: "2011/10/07"
                }
            }
        });

    }

    function createBubbleChart() {

        $("#dateaxischange").visble = false;
        var jobGrowth = [{
            growth: -2500,
            jobs: 50000,
            applications: 500000,
            company: "Microsoft"
        }, {
            growth: 500,
            jobs: 110000,
            applications: 7600000,
            company: "Starbucks"
        }, {
            growth: 7000,
            jobs: 19000,
            applications: 700000,
            company: "Google"
        }, {
            growth: 1400,
            jobs: 150000,
            applications: 700000,
            company: "Publix Super Markets"
        }, {
            growth: 2400,
            jobs: 30000,
            applications: 300000,
            company: "PricewaterhouseCoopers"
        }, {
            growth: 2450,
            jobs: 34000,
            applications: 90000,
            company: "Cisco"
        }, {
            growth: 2700,
            jobs: 34000,
            applications: 400000,
            company: "Accenture"
        }, {
            growth: 2900,
            jobs: 40000,
            applications: 450000,
            company: "Deloitte"
        }, {
            growth: 3000,
            jobs: 55000,
            applications: 900000,
            company: "Whole Foods Market"
        }];
        $("#chart").kendoChart({
            title: {
                text: "Job Growth for 2011"
            },
            legend: {
                visible: false
            },
            dataSource: {
                data: jobGrowth
            },
            series: [{
                type: "bubble",
                xField: "growth",
                yField: "jobs",
                sizeField: "applications",
                categoryField: "company"
            }],
            xAxis: {
                labels: {
                    format: "{0:N0}",
                    skip: 1
                },
                axisCrossingValue: -5000,
                majorUnit: 2000,
                plotBands: [{
                    from: -5000,
                    to: 0,
                    color: "#00f",
                    opacity: 0.05
                }]
            },
            yAxis: {
                labels: {
                    format: "{0:N0}"
                },
                line: {
                    width: 0
                }
            },
            tooltip: {
                visible: true,
                format: "{3}: {2:N0} applications",
                opacity: 1
            }
        });
    }
    function createBarChart() {
        $("#dateaxischange").visble = false;
        $("#chart").kendoChart({
            title: {
                text: "Gross domestic product growth /GDP annual %/"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [{
                name: "India",
                data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
            }, {
                name: "Russian Federation",
                data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
            }, {
                name: "Germany",
                data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
            }, {
                name: "World",
                data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
            }],
            valueAxis: {
                labels: {
                    format: "{0}%"
                },
                line: {
                    visible: false
                },
                axisCrossingValue: 0
            },
            categoryAxis: {
                categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                line: {
                    visible: false
                },
                labels: {
                    padding: { top: 145 }
                }
            },
            tooltip: {
                visible: true,
                format: "{0}%",
                template: "#= series.name #: #= value #"
            }
        });    }    function createAreaChart() {

        $("#dateaxischange").visble = false;
        $("#chart").kendoChart({
            title: {
                text: "Browser Usage Trends"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "area",
                stack: true
            },
            series: [{
                name: "Chrome",
                data: [0, 0, 0, 0, 3.6, 9.8, 22.4, 34.6]
            }, {
                name: "Firefox",
                data: [0, 23.6, 29.9, 36.3, 44.4, 46.4, 43.5, 37.7]
            }, {
                name: "Internet Explorer",
                data: [76.2, 68.9, 60.6, 56.0, 46.0, 37.2, 27.5, 20.2]
            }, {
                name: "Mozilla",
                data: [16.5, 2.8, 2.5, 1.2, 0, 0, 0, 0]
            }, {
                name: "Opera",
                data: [1.6, 1.5, 1.5, 1.6, 2.4, 2.3, 2.2, 2.5]
            }, {
                name: "Safari",
                data: [0, 0, 0, 1.8, 2.7, 3.6, 3.8, 4.2]
            }],
            valueAxis: {
                labels: {
                    format: "{0}%"
                },
                line: {
                    visible: false
                },
                axisCrossingValue: -10,
                max: 100
            },
            categoryAxis: {
                categories: [2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "{0}%",
                template: "#= series.name #: #= value #%"
            }
        });
    }


    function createMultiAxisChart() {
        $("#dateaxischange").visble = false;
        $("#chart").kendoChart({
            title: {
                text: "Hybrid car mileage report"
            },
            legend: {
                position: "top"
            },
            series: [{
                type: "column",
                data: [20, 40, 45, 30, 50],
                stack: true,
                name: "on battery",
                color: "#cc6e38"
            }, {
                type: "column",
                data: [20, 30, 35, 35, 40],
                stack: true,
                name: "on gas",
                color: "#ef955f"
            }, {
                type: "line",
                data: [30, 38, 40, 32, 42],
                name: "mpg",
                color: "#ec5e0a",
                axis: "mpg"
            }, {
                type: "line",
                data: [7.8, 6.2, 5.9, 7.4, 5.6],
                name: "l/100 km",
                color: "#4e4141",
                axis: "l100km"
            }],
            valueAxes: [{
                title: { text: "miles" },
                min: 0,
                max: 100
            }, {
                name: "km",
                title: { text: "km" },
                min: 0,
                max: 161,
                majorUnit: 32
            }, {
                name: "mpg",
                title: { text: "miles per gallon" },
                color: "#ec5e0a"
            }, {
                name: "l100km",
                title: { text: "liters per 100km" },
                color: "#4e4141"
            }],
            categoryAxis: {
                categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
                // Align the first two value axes to the left
                // and the last two to the right.
                //
                // Right alignment is done by specifying a
                // crossing value greater than or equal to
                // the number of categories.
                axisCrossingValues: [0, 0, 10, 10]
            }
        });
    }

   

    $(document).ready(function () {

        setTimeout(function () {
            // Initialize the chart with a delay to make sure
            // the initial animation is visible
            createAreaChart();

            $("#chart").bind("kendo:skinChange", function (e) {
                createAreaChart();
            });
        }, 400);
        
        $('.option').bind("click", function () {
            $(this).siblings('.active').removeClass('active');
            $(this).addClass('active');

        });
    });

   

</script>